<template>
  <div class="page">
    <SearchForm
      ref="searchForm"
      :formData="getFormData"
      :onSearch="onSearch"
      :onReset="onReset"
    ></SearchForm>
    <div class="page-operations">
      <Button type="primary">自动刷新</Button>
      <Button @click="onFormReset" icon="download">下载</Button>
    </div>
    <div class="table-container">
      <MTable
        :data="tableData"
        :columns="getColumns"
        :onChange="onPageChange"
        row-key="key"
        :pagination="pagination"
        :loading="loading"
        :scroll="{ x: 1500 }"
      >
        <!-- <span slot="customTitle"><Icon type="smile-o" /> 测试a</span> -->
        <!-- <span slot="a" slot-scope="{ text }">{{ text + "1111" }}</span> -->
        <span slot="action" slot-scope="{ record }">
          <Button @click="operate(record)" type="danger" size="small"
            >补单</Button
          >
          <Button
            @click="operate(record)"
            type="primary"
            style="margin-left: 8px"
            size="small"
            >查看日志</Button
          >
        </span>
      </MTable>
    </div>
    <DrawerDetail
      :onClose="onClose"
      title="日志"
      :data="detailData"
      :visible="visible"
    ></DrawerDetail>
  </div>
</template>

<script>
import mockData from "@/components/DrawerDetail/mockData";
import { formData, columns } from "./constant";
import MTable from "@/components/MTable/index";
import DrawerDetail from "@/components/DrawerDetail/index";
import SearchForm from "@/components/SearchForm";
import { Button } from "ant-design-vue";
export default {
  name: "orderList",
  components: { SearchForm, Button, MTable, DrawerDetail },
  props: {},
  mounted() {
    this.getData();
  },
  data() {
    return {
      detailData: [],
      pagination: {
        current: 1,
        pageSize: 20,
        total: 0,
      },
      visible: false,
      loading: false,
      tableData: [],
      DrawerVisible: false,
    };
  },
  methods: {
    onSearch(v) {
      console.log("v: ", v);
      this.getData(v);
    },
    onReset() {
      this.getData();
      console.log("reset");
    },
    onPageChange(page) {
      this.pagination.current = page.current;
      this.pagination.pageSize = page.pageSize;
      this.getData();
    },
    getData() {
      // 列表请求接口
      this.loading = true;
      return new Promise((resolve) => {
        setTimeout(() => {
          const data = Array.from(Array(20).keys(), (id) => {
            return {
              id: id + new Date().toString(),
              a: new Date().toString(),
            };
          });
          this.loading = false;
          this.tableData = data;
          this.pagination.total = 200;
          resolve(data);
        }, 1000);
      });
    },
    onFormReset() {
      this.$refs.searchForm.onReset();
    },
    onFormSubmit() {
      this.$refs.searchForm.onSubmit();
    },
    operate(record) {
      console.log("record: ", record);
      this.detailData = mockData;
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
  },
  computed: {
    getFormData() {
      return formData({});
    },
    getColumns() {
      return columns();
    },
  },
};
</script>

<style lang="less">
.page {
  background: #fff;
  .page-operations {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    padding: 6px 0px;
  }
  .table-container {
    margin-top: 24px;
  }
}
</style>
